<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-butterbar.html">
<link rel="import" href="../components/cr-settings-editor.html">

<polymer-element name="cr-settings-view">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <link rel="stylesheet" href="../common/forms.css">
        <style>
            :host {
                display: block;
            }
        </style>
        <cr-butterbar message="{{ butterbarMessage }}"></cr-butterbar>
        <h1 class="app-header">My settings</h1>
        <template if="{{ settings }}">
            <cr-settings-editor settings="{{ settings }}" disabled="{{ disabled }}" errors="{{ errors }}"></cr-settings-editor>
            <cr-toolbar>
                <button is="cr-button" primary on-tap="{{ save }}">Save</button>
                <div class="ui-actions">
                    <a is="cr-action" on-tap="{{ logout }}">Logout</a>
                </div>
            </cr-toolbar>
        </template>
    </template>
    <script>
        Polymer({
            created: function() {
                this.settings = null;
                this.butterbarMessage = "";
                this.disabled = false;
                this.errors = {};
            },
            attached: function() {
                var self = this;
                User.loadCurrentUser({cached: true}).then(function() {
                    self.loadSettings();
                }).catch(function(e) {
                    self.fire("login");
                });
            },
            loadSettings: function() {
                var self = this;
                var settings = new UserSettings();
                this.butterbarMessage = "Loading settings...";
                settings.loadDetails().then(function() {
                    self.settings = settings;
                    self.butterbarMessage = "";
                }).catch(function(e) {
                    self.butterbarMessage = "Error loading settings.";
                });
            },
            reset: function() {
                this.disabled = false;
                this.errors = {};
                this.butterbarMessage = "";
            },
            logout: function() {
                location.href = User.getLogoutUrl();
            },
            save: function() {
                if (!this.settings)
                    return;
                var self = this;
                this.reset();
                this.disabled = true;
                this.butterbarMessage = "Saving...";
                this.settings.save().then(function() {
                    self.reset();
                }).catch(function(error) {
                    self.reset();
                    if (!error.fieldName) {
                        self.butterbarMessage = "Error: " + error.message;
                        return;
                    }
                    self.errors[error.fieldName] = error.message;
                });
            },
        });
    </script>
</polymer-element>
